<template>
  <div class="list_count" @click="wayimgTongOpen1(list.classify)">
    <div>
      <div>时间：</div>
      <div class="list_count_left">{{list.date_time}}  {{list.day_time}}</div>
    </div>
    <div>
      <div>联赛：</div>
      <div class="list_count_left">{{list.name}}</div>
    </div>
    <div>
      <div>对阵：</div>
      <div class="list_count_left">{{list.join_team}}</div>
    </div>
    <div>
      <div style="min-width:42px">推介：</div>
      <div class="list_count_left" >

<!--        v-if="+$is_vip===2||count"-->
        <span style="color: #7fdcab;min-width: 300px;display: flex;align-items: center" v-if="+$is_vip===2||count">{{list.recommend}}


<!--position: absolute-->

          <span v-if="list.classify===1" style="display: inline-block;background-color: #fff;padding: 0px 4px;color: #000;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 15px;">免费</span>
         <span v-else style="display: inline-block;background-color: rgba(252, 223, 69, 1);padding: 0px 4px;color: #000;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 15px;">会员</span>
         <span v-if="count&&+list.is_win===1" style="display: inline-block;background-color: red;padding: 0px 4px;color: #fff;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 14px">红</span>
         <span v-if="count&&+list.is_win===2" style="display: inline-block;background-color:  #000000;padding: 0px 4px;color: #fff;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 14px">黑</span>
         <span v-if="count&&+list.is_win===3" style="display: inline-block;background-color: #4E4E4E;padding: 0px 4px;color: #fff;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 14px">走</span>




        </span>
        <span  style="color: #7fdcab;min-width: 300px;display: flex" v-else-if="list.classify===1">
          {{list.recommend}}

          <span v-if="list.classify===1" style="display: inline-block;background-color: #fff;padding: 0px 4px;color: #000;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 15px;">免费</span>
         <span v-else style="display: inline-block;background-color: rgba(252, 223, 69, 1);padding: 0px 4px;color: #000;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 15px;">会员</span>

          <span v-if="count&&+list.is_win===1" style="display: inline-block;background-color: red;padding: 0px 4px;color: #fff;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 14px">红</span>
         <span v-if="count&&+list.is_win===2" style="display: inline-block;background-color:  #000000;padding: 0px 4px;color: #fff;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 14px">黑</span>
         <span v-if="count&&+list.is_win===3" style="display: inline-block;background-color: #4E4E4E;padding: 0px 4px;color: #fff;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 14px">走</span>
        </span>
        <span style="color: #7fdcab;min-width: 300px;display: flex" v-else>

          古德温救我会员可见
         <span style="display: inline-block;background-color: rgba(252, 223, 69, 1);padding: 0px 4px;color: #000;min-width: 30px;text-align: center;font-size: 10px;border-radius: 2px;margin-left: 4px;font-weight: bold;height: 14px;line-height: 15px;">会员</span>

        </span>
        </div>
    </div>
    <div>
      <div>跟注：</div>
      <div class="list_count_left">{{list.call_num}}人</div>
    </div>
    <div>
      <div >赛果：</div>
      <div class="list_count_left">
        <span v-if="count">{{list.result}}</span>
        <span v-if="!count">待定</span>
        </div>
    </div>


    <div class="list_count_but" >
      <div @click.stop="wayimgTongOpen(list.banner,list.classify)" style="background-color: rgba(26, 103, 78, 1);">投注截屏</div>
<!--      <div @click="hasVip" v-if="+list.classify===2" style="background-color: rgba(252, 223, 69, 1);color: #1c1c1e;margin-left: 8px">会员</div>-->
<!--      <div v-if="+list.classify===1" style="background-color: rgba(255, 255, 255, 1);color: #1c1c1e;margin-left: 8px">免费</div>-->
    </div>
<!--    @click="hasVip"-->
<!--    <div class="list_count_red" v-if="count">-->

<!--      <van-image-->
<!--          v-if="+list.is_win===1"-->
<!--          width="60"-->
<!--          height="60"-->
<!--          :src="image2"-->
<!--          :round="true"-->
<!--      />-->
<!--      <van-image-->
<!--          v-if="+list.is_win===2"-->
<!--          width="60"-->
<!--          height="60"-->
<!--          :src="image1"-->
<!--          :round="true"-->
<!--      />-->
<!--      <van-image-->
<!--          v-if="+list.is_win===3"-->
<!--          width="60"-->
<!--          height="60"-->
<!--          :src="image3"-->
<!--          :round="true"-->
<!--      />-->
<!--&lt;!&ndash;      <svg-icon v-if="+list.is_win===1" style="width:60px;height:60px" name="jingcaiR" />&ndash;&gt;-->
<!--&lt;!&ndash;      <svg-icon v-if="+list.is_win===2" style="width:60px;height:60px" name="jingCaiH" />&ndash;&gt;-->
<!--&lt;!&ndash;      <svg-icon v-if="+list.is_win===3" style="width:60px;height:60px" name="jingCaiP" />&ndash;&gt;-->

<!--    </div>-->
  </div>

</template>

<script setup lang="ts">
import image1 from "./../../image/image2_0/Component 2.png"
import image2 from "./../../image/image2_0/Component 3.png"
import image3 from "./../../image/image2_0/Component 4.png"
import {useRouter} from "vue-router";
import {ComponentInternalInstance, getCurrentInstance, onMounted, nextTick, onBeforeUnmount, ref} from 'vue';
const { proxy } =  getCurrentInstance() as ComponentInternalInstance
import {showFailToast,showImagePreview} from "vant";
const wayimgTongOpen = (item,a)=>{
  if (+proxy.$is_vip === 1&&+a!==1){
    router.push({
      path: "/purchaseMembership",
      query: {
        mode: "",
      },
    });
    return
  }
  proxy.$showImagePreview(item)
}
const wayimgTongOpen1 = (item)=>{
  if (+proxy.$is_vip === 1&&item!==1){
    router.push({
      path: "/purchaseMembership",
      query: {
        mode: "",
      },
    });
    return
  }
}

const router = useRouter()

import {toRefs ,defineProps} from "vue";
interface Props {
  list?: object,
  count?:Boolean
}
defineProps<Props>()
const hasVip = ()=>{
  if (+proxy.$is_vip === 2){
    return
  }

  router.push({
    path: "/purchaseMembership",
    query: {
      mode: "",
    },
  });
}

</script>

<style scoped lang="less">
.image_image{
  width: 100%;
}
.list_count{
  padding: 7px 0;
  margin-top: 12px;
  background-color: #373737;
  border-radius: 4px;
  color: #fff;
  position: relative;
  .list_count_red{
    position: absolute;
    right: 10px;
    bottom: 10px;
    -webkit-transform: rotate(-45deg);    /* for Chrome || Safari */
    -moz-transform: rotate(-45deg);       /* for Firefox */
    -ms-transform: rotate(-45deg);        /* for IE */
    -o-transform: rotate(-45deg);
  }
  .list_count_but{
    //padding:8px 18px;
    position: absolute;
    right: 0px;
    bottom: 2px;
    font-size: 14px;
    line-height: 16px;
    border-radius: 18px;
    text-align: center;
    >div{
      width: 100px;
      padding:8px 10px;

    }
    //background-color: #1A674E;
  }
  >div{
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 14px;
    .list_count_left{
      margin-left:0px;
    }
  }
}

</style>
